<template>
  <div class="switch">
    <el-switch
      v-model="isOpen"
      :active-text="configValue.openText"
      :inactive-text="configValue.closeText"
      :width="configValue.width"
      :active-color='configValue.activeColor'
      :inactive-color='configValue.inactiveColor'
    >
    </el-switch>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'

export default defineComponent({
  props: {
    configValue: {
      type: Object,
      default: () => {
        return {
          openText: 'on',
          closeText: 'off',
          width: 60,
          activeColor: '#409EFF',
          inactiveColor: '#C0CCDA'
        }
      }
    }
  },
  setup() {
    let isOpen = ref(true) // switch开关状态
    let openText = ref('aaa') // on状态文字
    let closeText = ref('bbb') // off状态文字

    return { isOpen, openText, closeText }
  }
})
</script>

<style lang="scss" scoped>
.switch {
  :deep .el-switch {
    position: relative;
  }
  :deep .el-switch__label {
    display: none;
  }
  :deep .el-switch__label--left {
    position: absolute;
    color: rgb(44, 42, 42);
    left: 22px;
    z-index: 1;
  }

  :deep .el-switch__label--right {
    position: absolute;
    right: 20px;
    color: #fff;
  }

  :deep .el-switch__label {
    display: none;
  }

  :deep .el-switch__label.is-active {
    display: block;
  }
}
</style>